<template>
  <div class="app-container">
    <el-form label-width="100px" width="200">
        <el-form-item label="账号" placeholder="账号">
          <el-input v-model="admin.adminAccount"/>
        </el-form-item>
        <el-form-item label="姓名" placeholder="姓名">
          <el-input v-model="admin.adminName"/>
        </el-form-item>
        <el-form-item label="年龄" placeholder="年龄">
          <el-input v-model="admin.adminAge"/>
        </el-form-item>
        <el-form-item label="性别" placeholder="性别">
          <!-- <el-input v-model="admin.adminSex"/> -->
          <el-select v-model="admin.currSexVal" placeholder="请选择">
            <el-option
              v-for="item in admin.adminSex"
              :key="item.key"
              :label="item.val"
              :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="角色">
          <el-input v-model="admin.adminRole"/>
        </el-form-item> -->
        <el-form-item label="角色">
          <el-select v-model="admin.currRoleVal" placeholder="请选择">
            <el-option
              v-for="item in admin.adminRole"
              :key="item.key"
              :label="item.val"
              :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系方式" placeholder="联系方式">
          <el-input v-model="admin.adminPhone"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveAdminInfo()">保存</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>
import admin from '@/api/admin';
export default {
    name:'AdminSave',
    data(){
        return {
            admin:{
                adminAccount:'',
                adminName:'',
                adminAge:'',
                adminSex:[
                {
                    key:1,
                    val:'男'
                },
                {
                    key:2,
                    val:'女'
                }
                ],
                adminRole:[
                {
                    key:1,
                    val:'管理员'
                },
                {
                    key:2,
                    val:'超级管理员'
                }
                ],
                //当前选中的角色
                currRoleVal:'',
                //当前选中的性别
                currSexVal:'',
                adminPhone:''
            }
        }
    },
    methods:{
        saveAdminInfo(){
            console.log('添加的数据admin：', this.admin)
            let adminDto = {
                adminAccount:this.admin.adminAccount,
                adminName:this.admin.adminName,
                adminAge:this.admin.adminAge,
                currAdminSex:this.admin.currSexVal,
                currAdminRole:this.admin.currRoleVal,
                adminPhone:this.admin.adminPhone
            }
            console.log('待添加的数据admin：', this.admin)
            admin.saveAdmin(adminDto).then(
                response => {
                    console.log('管理员添加响应数据：', response)
                    let resData = response.data.data
                    let resCode = response.data.code
                    let resMsg = response.data.message
                    if(resCode == '200' && resData){
                        //提示
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        })
                        //响应成功，跳转列表页面，使用路由跳转方式实现
                        this.$router.push({path:'/admin_list'})
                    } else {
                        //异常提示
                        this.$message({
                            type: 'error',
                            message: resMsg
                        })
                    }
                },
                error => {
                    console.error('管理员添加异常信息：', error)
                }
            )
        }
    }
}
</script>

<style>
  .el-input{
    width: 223px;
  }
</style>